<template>
	<view>
		<Header title="云上坚果"></Header>
		<view class="wrap">
			<view class="main_wrap">
				<view class="main">
					<view class="land_name">
						<view class="land_name_tit">地块名称:</view>
						<van-cell-group>
							<van-field :value="value" placeholder="龙州镇东合村xxxx地块" :border="true" />
						</van-cell-group>
					</view>

					<view class="land_class">
						<view class="land_class_tit">地块类型:</view>
						<van-row>

							<van-checkbox-group style="display: flex;justify-content: flex-start;flex-wrap: wrap;"
								:value="result" @change="onChange">
								<van-checkbox  checked-color="#000" name="a">旱地</van-checkbox>
								<van-checkbox  checked-color="#000" name="b">水田</van-checkbox>
								<van-checkbox  checked-color="#000" name="c">山地</van-checkbox>
								<van-checkbox  checked-color="#000" name="d">综合地</van-checkbox>

							</van-checkbox-group>
						</van-row>
					</view>
					
					<view class="area">
						<view class="area_item" v-for="item in 5">
							<view class="area_tit">旱地面积:</view>
							<view style="display: flex;justify-content: flex-start;align-items: baseline;width: 80%;">
								<van-cell-group>
									<van-field :value="value" placeholder="100" :border="true"  />
								</van-cell-group>
								<view style="margin-left: 20rpx;">亩</view>
							</view>
							
							
						</view>
					</view>
					
					<view class="plant_plan">
						<view class="plant_plan_tit">计划种植:</view>
						<van-row>
					
							<van-checkbox-group style="display: flex;justify-content: flex-start;flex-wrap: wrap;"
								:value="result" @change="onChange">
								<van-checkbox  checked-color="#000" name="a">旱地</van-checkbox>
								<van-checkbox  checked-color="#000" name="b">水田</van-checkbox>
								<van-checkbox  checked-color="#000" name="c">山地</van-checkbox>
								<van-checkbox  checked-color="#000" name="d">综合地</van-checkbox>
					
							</van-checkbox-group>
						</van-row>
					</view>
					<view class="plant">
						<view class="plant_item" v-for="item in 5">
							<view class="plant_tit">旱地面积:</view>
							<view style="display: flex;justify-content: flex-start;align-items: baseline;width: 80%;">
								<van-cell-group>
									<van-field :value="value" placeholder="100" :border="true"  />
								</van-cell-group>
								<view style="margin-left: 20rpx;">亩</view>
							</view>
							
							
						</view>
					</view>
					
					<view class="location">
						<view class="location_item" v-for="item in 2">
							<view class="jingdu" style="margin-bottom: 15rpx;">经度</view>
							<van-row :gutter="10">
								<van-col span="12">
									<van-cell-group>
										<van-field :value="value" placeholder="100" :border="true"  />
									</van-cell-group>
								</van-col>
								<van-col span="12">
									<van-cell-group>
										<van-field :value="value" placeholder="100" :border="true"  />
									</van-cell-group>
								</van-col>
							</van-row>
						</view>
					</view>
					
					<van-row>
						<van-button type="primary" size="normal"  custom-style="display:flex;justify-conetent:center;width:400rpx;margin-top:60rpx">确认创建</van-button>
					</van-row>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from "../../components/header.vue"
	export default {
		data() {
			return {
				value: '',
				checked: true,
				result: ['a', 'b'],
			}
		},
		components: {
			Header
		},
		methods: {
			onChange(event) {
				// console.log(this)
				// console.log(event)
				this.result = event.detail



			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .van-cell {
		border: 1px solid red !important;
		margin-bottom: 40rpx;
	}
	
	/deep/ .van-checkbox{
		margin-right: 20rpx !important;
	}
	.wrap {
		padding: 60rpx 5rpx 0 5rpx;

		.main_wrap {
			border: 1px solid gray;
			// height: 500rpx;
			padding: 15rpx 30rpx 0;

			.main {
				// height: 400rpx;

				.land_name {
					.land_name_tit {
						margin-bottom: 20rpx;
					}

				}
				
				.land_class{
					margin-bottom: 30rpx;
					.land_class_tit{
						margin-bottom: 15rpx;
					}
				}
				.area{
					.area_item{
						// /deep/ .van-cell{
						// 	width: 80% !important;
						// }
						margin-bottom: 30rpx;
						.area_tit{
							margin-bottom: 20rpx;
						}
					}
				}
				
				.plant_plan{
					margin-bottom: 30rpx;
					.plant_plan_tit{
						margin-bottom: 15rpx;
					}
				}
				.plant{
					.plant_item{
						// /deep/ .van-cell{
						// 	width: 80% !important;
						// }
						margin-bottom: 30rpx;
						.plant_tit{
							margin-bottom: 20rpx;
						}
					}
				}
				
			}
		}
	}
</style>
